<template>
    <van-loading v-if="loading" class="loading" />
    <template v-else>
        <nav-bar></nav-bar>
        <div class="container">
            <Banner>
            </Banner>
            <HomeRecommend></HomeRecommend>
        </div>
    </template>
</template>
<script setup>
import NavBar from "@/components/common/NavBar.vue";
import Banner from "@/components/index/Banner.vue"
import HomeRecommend from "@/components/index/HomeRecommend.vue";
import { ref, onMounted, provide } from "vue";


const loading = ref(true);

const loadedCount = ref(0);
const expectedLoadCount = 3; // NavBar, Banner, HomeRecommend


// 提供加载状态管理函数
// 当子组件都加载完毕了，修改loading状态
const registerComponentLoad = () => {
    loadedCount.value++
    console.log(`组件加载完成: ${loadedCount.value}/${expectedLoadCount}`)
    if (loadedCount.value >= expectedLoadCount) {
        // console.log("所有组件加载完成，隐藏loading")
        loading.value = false
    }
}

provide('registerComponentLoad', registerComponentLoad)

// 添加超时保护
// 添加超时保护
onMounted(() => {
    setTimeout(() => {
        if (loading.value) {
            console.log("超时保护触发，强制显示内容")
            loading.value = false
        }
    }, 100)
});


</script>
<style scoped lang="scss">
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-items: center;
}
</style>